<template>
  <view class="page">
    <!-- 顶部乘客卡片 -->
    <view class="passenger-bar">
      <image :src="taskData.avatar" class="avatar" mode="aspectFill" />
      <view class="passenger-info">
        <text class="name">{{ taskData.username }}</text>
        <view v-if="taskData.rating">
          <view class="rating">
            <u-icon
              name="star-fill"
              color="#FFC107"
              size="14"
              v-for="i in taskData.rating"
              :key="i"
            />
            <text class="score">{{ taskData.rating }}.0</text>
          </view>
        </view>
      </view>
      <view class="status-tag" :class="'status-' + taskData.status">{{
        taskData.status
      }}</view>
    </view>

    <!-- 主卡片 -->
    <view class="task-card">
      <view class="task-header">
        <h3 class="task-title">{{ taskData.title }}</h3>
        <view class="task-status" :class="'status-' + taskData.status">{{
          taskData.status
        }}</view>
      </view>

      <view class="task-body">
        <!-- 行程信息 -->
        <view class="task-section">
          <view class="section-title">行程信息</view>
          <view class="route-line">
            <view class="dot start"></view>
            <text class="location">{{ taskData.departureLocation }}</text>
            <view class="line"></view>
            <view class="dot end"></view>
            <text class="location">{{ taskData.destination }}</text>
          </view>

          <view class="time-row">
            <text>预计：</text>
            <u-icon name="clock" color="#3498db" size="16" />
            <text>{{ fmtTime(taskData.startTime) }} 出发</text>
            <text class="ml-auto">
              {{ fmtTime(taskData.actualStartTime) }} 返回</text
            >
          </view>

          <view class="time-row" v-if="taskData.status === 'completed'">
            <text>实际：</text>
            <u-icon name="clock" color="#3498db" size="16" />
            <text>{{ fmtTime(taskData.startTime) }} 出发</text>
            <text class="ml-auto">
              {{ fmtTime(taskData.actualEndTime) }} 返回</text
            >
          </view>
        </view>

        <!-- 乘客信息 -->
        <view class="task-section">
          <view class="section-title">乘客信息</view>
          <view class="info-grid">
            <view class="info-item">
              <text class="label">乘车人数</text>
              <text class="value">{{ taskData.passengers }} 人</text>
            </view>
            <view class="info-item">
              <text class="label">联系电话</text>
              <text class="value phone" @click="contactPassenger">{{
                taskData.phone
              }}</text>
            </view>
          </view>
        </view>

        <!-- 车辆信息 -->
        <view class="task-section">
          <view class="section-title">车辆信息</view>
          <view class="info-grid">
            <view class="info-item">
              <text class="label">车牌号</text>
              <text class="value">{{ taskData.plateNumber }}</text>
            </view>
            <view class="info-item">
              <text class="label">车型</text>
              <text class="value">{{ taskData.vehicleType }}</text>
            </view>
            <view class="info-item">
              <text class="label">座位数</text>
              <text class="value">{{ taskData.seats }} 座</text>
            </view>
          </view>
        </view>

        <!-- 评价 -->
        <view class="task-section" v-if="taskData.feedback">
          <view class="section-title">乘客评价</view>
          <view class="feedback-box">
            <text class="feedback-text">“{{ taskData.feedback }}”</text>
          </view>
        </view>

        <!-- 任务备注 -->
        <view class="task-section" v-if="taskData.remarks">
          <view class="section-title">任务备注</view>
          <view class="remark-box">{{ taskData.remarks }}</view>
        </view>

        <!-- 任务图片 -->
        <view
          class="task-section"
          v-if="taskData.imgList && taskData.imgList.length"
        >
          <view class="section-title">任务图片</view>
          <scroll-view class="img-scroll" scroll-x>
            <view
              class="img-wrap"
              v-for="(img, idx) in taskData.imgList"
              :key="idx"
              @click="previewImage(idx)"
            >
              <image class="task-img" :src="img" mode="aspectFill" />
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="action-buttons">
        <u-button type="default" plain @click="contactPassenger"
          >联系乘客</u-button
        >
        <u-button
          type="success"
          @click="acceptTask"
          v-if="taskData.status == '待开始'"
          >开始任务</u-button
        >
        <u-button
          type="success"
          @click="completeTask"
          v-if="taskData.status == '进行中'"
          >完成任务</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { formatTaskTime } from "@/utils/formatTaskTime.js";
export default {
  data() {
    return {
      currentBottomTab: "任务",
      taskData: {},
      previewCurrent: 0,
    };
  },
  onLoad(options) {
    console.log("任务ID:", options);
    this.getOrderInfo(options.id);
  },
  methods: {
    fmtTime: formatTaskTime,
    async getOrderInfo(id) {
      const res = await uni.$http.get(`/sys/orders/getById/${id}`);
      this.taskData = res.data.data;
      if (this.taskData.status === "dispatched") {
        this.taskData.status = "待开始";
      } else if (this.taskData.status === "in_progress") {
        this.taskData.status = "进行中";
      } else if (this.taskData.status === "completed") {
        this.taskData.status = "已完成";
      } else if (this.taskData.status === "cancelled") {
        this.taskData.status = "已取消";
      }
    },
    goBack() {
      uni.navigateBack();
    },
    switchBottomTab(tabName) {
      console.log("点击底部选项卡：", tabName);
      this.currentBottomTab = tabName;
      if (tabName === "通知") {
        uni.showToast({
          title: "跳转到通知页面",
          icon: "none",
        });
      } else if (tabName === "我的") {
        uni.showToast({
          title: "跳转到我的页面",
          icon: "none",
        });
      }
    },
    contactPassenger() {
      console.log("联系乘客:", this.taskData.phone);
      uni.makePhoneCall({
        phoneNumber: this.taskData.phone,
      });
    },
    completeTask() {
      uni.navigateTo({
        url: `/pages/taskComplete/taskComplete?id=${this.taskData.id}`,
      });
    },
    previewImage(index) {
      this.previewCurrent = index;
      uni.previewImage({
        urls: this.taskData.imgList || [],
        current: this.taskData.imgList[index],
      });
    },
    async acceptTask() {
      uni.showModal({
        title: "确认开始",
        content: `确定要开始“${this.taskData.orderId}”任务吗？`,
        success: async (res) => {
          // ← 这里加 async
          if (res.confirm) {
            try {
              const res = await uni.$http.put(
                `/sys/orders/startTask/${this.taskData.id}`
              );
              if (res.data.code === 20000) {
                console.log("任务开始成功");
                uni.showToast({ title: res.data.message, icon: "success" });
                uni.navigateTo({
                  url: `/pages/taskDetail/taskDetail?id=${this.taskData.id}`,
                });
              }
            } catch (e) {
              uni.showToast({ title: "操作失败", icon: "none" });
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: linear-gradient(180deg, #eaf7ff 0%, #f5f9ff 100%);
  min-height: 100vh;
  padding-bottom: 100px;
}

.passenger-bar {
  margin: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 2rpx solid #eaf7ff;
  }
  .passenger-info {
    flex: 1;
    margin-left: 20rpx;
    .name {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
    }
    .rating {
      display: flex;
      align-items: center;
      margin-top: 6rpx;
      .score {
        margin-left: 8rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  .status-tag {
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
}

.task-card {
  background: #fff;
  margin: 0 30rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.task-header {
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-title {
  font-weight: 600;
  margin: 0;
  font-size: 36rpx;
  color: #222;
}

.task-status {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.task-body {
  padding: 30rpx;
}

/* 行程路线 */
.route-line {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    &.start {
      background: #3498db;
    }
    &.end {
      background: #2ecc71;
    }
  }
  .line {
    flex: 1;
    height: 2rpx;
    background: #e0e0e0;
    margin: 0 16rpx;
  }
  .location {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
  }
}

.time-row {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  .ml-auto {
    margin-left: auto;
  }
}

.task-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-weight: 600;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #f0f0f0;
  font-size: 30rpx;
  color: #333;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
  .info-item {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    .label {
      font-size: 26rpx;
      color: #999;
      margin-bottom: 6rpx;
    }
    .value {
      font-size: 30rpx;
      color: #222;
      &.phone {
        color: #3498db;
      }
    }
  }
}

.feedback-box {
  background: #f5f9ff;
  border-radius: 12rpx;
  padding: 24rpx;
  .feedback-text {
    font-size: 30rpx;
    color: #555;
    line-height: 1.6;
  }
}

.remark-box {
  font-size: 30rpx;
  color: #555;
  line-height: 1.6;
}

.img-scroll {
  white-space: nowrap;
  margin-top: 20rpx;
}

.img-wrap {
  display: inline-block;
  margin-right: 20rpx;
}

.task-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  background-color: #f0f0f0;
}

.action-buttons {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
}
</style>
